const form = document.getElementById('form');
const password = document.getElementById('password');
const confirmPwd = document.getElementById('confirmPwd');
const messageContainer = document.querySelector('.message-container');
const message = document.getElementById('message');


let isValid = false;
let passwordsMatch = false;

function validateForm() {
    // Using Contraint API
    isValid = form.checkVisibility();
    // Style main message for an error
    if(!isValid){
        message.textContent = 'Please fill out all fields.';
        message.style.color = 'red';
        messageContainer.style.borderColor = 'red';
        return;
    }
    // Check to see if passwords match
    if(password.value === confirmPwd.value){
        passwordsMatch = true;
        password.style.borderColor = 'green';
        confirmPwd.style.borderColor = 'green';
    }else{
        passwordsMatch = false;
        message.textContent = 'Make suer passwords match.';
        message.style.color = 'red';
        messageContainer.style.borderColor = 'red';
        password.style.borderColor = 'red';
        confirmPwd.style.borderColor = 'red';
        return;
    }
    // If form is valid and passwords match
    if(isValid && passwordsMatch){
        message.textContent = 'Successfully Registered!';
        message.style.color = 'green';
        messageContainer.style.color = 'green';
    }
}

function storeFormData() {
    const user = {
        name:form.name.value,
        phone:form.phone.value,
        email:form.email.value,
        website:form.website.value,
        password:form.password.value
    };
    console.log(user);
}

function processFormData(e) {
    e.preventDefault();
    // Validate Form
    validateForm();
    // Submit Data if Valid
    if(isValid && passwordsMatch){
        storeFormData();
    }
}



// Event Listener
form.addEventListener('submit',processFormData);










